<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>书库</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<meta name="format-detection" content="telephone = no" />
		<meta name="format-detection" content="email = no" />
		<title>Document</title>
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
		<link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.min.css">
		<link rel="stylesheet" type="text/css" href="font_eaac73f2gdk/iconfont.css">
		<link rel="stylesheet" href="./CSS/style-1.css">
		<link rel="stylesheet" type="text/css" href="CSS/lbt2.css" />
		<script src="./JS/jquery-1.7.2.min.js"></script>
	</head>

	<body>
		<header style="margin-bottom: 0.1rem;">
			<div class="search">
				<a href="" class="search_1">
					<img src="img/search.png" width="22" height="22" />
				</a>
				<input type="text" name="search" id="" placeholder="请输入书名或作者名" />
			</div>
		</header>
		<div id="myCarousel" class="carousel slide">
			<ol class="carousel-indicators">
				<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
				<li data-target="#myCarousel" data-slide-to="1"></li>
				<li data-target="#myCarousel" data-slide-to="2"></li>
			</ol>
			<div class="carousel-inner">
				<div class="item active" style="background:#223240;">
					<a href="#"><img src="img/lbt1.jpg" alt="第一张" style="height: 5.6rem"></a>
				</div>
				<div class="item" style="background: #f1ddc5">
					<a href="#"><img src="img/lbt3.jpg" alt="第二张" style="height: 5.6rem"></a>
				</div>
				<div class="item">
					<a href="#"><img src="img/lbt2.jpg" alt="第三张" style="height: 5.6rem"></a>
				</div>
			</div>
			<a href="#myCarousel" data-slide="prev" class="carousel-control left">&lsaquo;</a>
			<a href="#myCarousel" data-slide="next" class="carousel-control right">&rsaquo;</a>
		</div>
		<div class="clearfix"></div>
		<div class="Book_nav">
			<div class="Book_nav_one fl">
				<img src="images/sk_03.gif" />
				<a href="#">所以书籍</a>
			</div>
			<div class="Book_nav_one fl">
				<img src="images/sk_06.gif" />
				<a href="#">所以书籍</a>
			</div>
		</div>
		<div class="clearfix"></div>
		<div class="Girl-1">
			<div class="G-header">
				<div class="G-Original">
					<span class="Original-girl">原创女生</span>
					<a href="" class="pull-right">排行榜</a>
				</div>
			</div>
			<div class="clearfix"></div>
			<div class="Girl-con">
				<div class="Sentiment fl">
					<img src="images/sk_11.gif" />
					<a href="#">现代言情</a>
					<span class="Division fr">|</span>
				</div>
				<div class="Sentiment fl">
					<img src="images/sk_13.gif" />
					<a href="#">玄幻仙侠</a>
				</div>
			</div>
			<div class="clearfix"></div>
			<div class="Girl-con">
				<div class="Sentiment fl">
					<img src="images/sk_17.gif" />
					<a href="#">青春校园</a>
					<span class="Division fr">|</span>
				</div>
				<div class="Sentiment fl">
					<img src="images/sk_18.gif" />
					<a href="#">高干军婚</a>
				</div>
			</div>
			<div class="clearfix"></div>
			<div class="Girl-con" style="border: none;">
				<div class="Sentiment fl">
					<img src="images/sk_21.gif" />
					<a href="#">古代穿越</a>
					<span class="Division fr">|</span>
				</div>
				<div class="Sentiment fl">
					<img src="images/sk_22.gif" />
					<a href="#">纯爱同人</a>
				</div>
			</div>
		</div>
		<div class="Girl-2">
			<div class="G-header">
				<div class="G-Original">
					<span class="Original-girl">原创男生</span>
					<a href="" class="pull-right">排行榜</a>
				</div>
			</div>
			<div class="clearfix"></div>
			<div class="Girl-con">
				<div class="Sentiment fl">
					<img src="images/sk_28.gif" />
					<a href="#">东方玄幻</a>
					<span class="Division fr">|</span>
				</div>
				<div class="Sentiment fl">
					<img src="images/sk_26.gif" />
					<a href="#">玄幻仙侠</a>
				</div>
			</div>
			<div class="clearfix"></div>
			<div class="Girl-con">
				<div class="Sentiment fl">
					<img src="images/sk_17.gif" />
					<a href="#">玄幻修真</a>
					<span class="Division fr">|</span>
				</div>
				<div class="Sentiment fl">
					<img src="images/sk_18.gif" />
					<a href="#">武侠盗墓</a>
				</div>
			</div>
			<div class="clearfix"></div>
			<div class="Girl-con" style="border: none;">
				<div class="Sentiment fl">
					<img src="images/sk_21.gif" />
					<a href="#">军事历史</a>
					<span class="Division fr">|</span>
				</div>
				<div class="Sentiment fl">
					<img src="images/sk_22.gif" />
					<a href="#">炼丹修真</a>
				</div>
			</div>
		</div>
		<footer class="footer-1">
			<ul>
				<li style="margin-left: 1.5rem;">
					<div class="Selected">
						<div class="Selected_1">
							<i class="fa fa-star" aria-hidden="true"></i>
						</div>
						<a href="#">精选</a>
					</div>
				</li>
				<li>
					<div class="Bookstore">
						<div class="Bookstore_1">
							<img src="img/书库.png" width="26" height="22" />
						</div>
						<a href="#">书库</a>
				</li>
				<li>
					<div class="Bookstore">
						<div class="Bookstore_1">
							<img src="img/书架.png" width="26" height="22" />
						</div>
						<a href="#">书架</a>
				</li>
				<li>
					<div class="Bookstore">
						<div class="Bookstore_1">
							<img src="img/我.png" width="26" height="22" />
						</div>
						<a href="#">我的</a>
				</li>

			</ul>
		</footer>
	</body>

</html>